<template>
    <el-row :gutter="5" class="row-with-margin">
        <el-col :span="8">
            <el-card style="margin-bottom: 5px">
                <template #header>
                    <div align="center" style="align-items: center;">
                        <span>集群信息</span>
                        <el-icon style="margin-left: 5px; " @click="getCluster()">
                            <Refresh/>
                        </el-icon>
                    </div>
                </template>
                <el-table
                    :data="infoTable"
                    :show-header="false"
                >
                    <el-table-column prop="key" label="key"/>
                    <el-table-column prop="value" label="value" align="right">
                        <template #default="scope">
                            <span v-if="scope.row.key!=='cluster.auth.enabled'"> {{ scope.row.value }} </span>
                            <el-switch size="small" v-if="scope.row.key==='cluster.auth.enabled'" v-model=scope.row.value
                                       @change="handleSwitchChange"/>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="16">
            <el-card style="margin-bottom: 5px; height:98%">
                <template #header>
                    <div align="center">
                        <span>节点信息</span>
                        <el-icon style="margin-left: 5px; " @click="getClusterMembers()">
                            <Refresh/>
                        </el-icon>
                    </div>
                </template>
                <el-table
                    :data="membersTable"
                    :show-header="true"
                >
                    <el-table-column prop="id" label="id"/>
                    <el-table-column prop="name" label="name"/>
                    <el-table-column prop="clientURLs" label="clientURLs"/>
                    <el-table-column prop="peerURLs" label="peerURLs"/>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="margin-bottom: 5px">
                <template #header>
                    <div align="center">
                        <span>当前实例</span>
                        <el-icon style="margin-left: 5px" @click="getCurrentInstance()">
                            <Refresh/>
                        </el-icon>
                    </div>
                </template>
                <el-table
                    :data="currentTable"
                    :show-header="false"
                >
                    <el-table-column prop="key" label="key"/>
                    <el-table-column prop="value" label="value" align="right"/>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="16">
            <el-card style="margin-bottom: 5px">
                <template #header>
                    <div align="center">
                        <span>数据统计</span>
                        <el-icon style="margin-left: 5px; " @click="getStatStore()">
                            <Refresh/>
                        </el-icon>
                    </div>
                </template>
                <el-table
                    :data="storeTable"
                    :show-header="false"
                >
                    <el-table-column prop="key" label="key"/>
                    <el-table-column prop="value" label="value" align="right"/>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
</template>
<script setup>
import {onMounted, ref, h, defineProps} from "vue";
import {
    is_auth_enabled,
    cluster_health,
    cluster_version,
    cluster_members,
    stats_leader,
    stats_self,
    stats_store,
    auth_disable, auth_enable
} from "@/api/etcd2.js";
import {ElMessage} from "element-plus";

const props = defineProps({
    connect: {
        type: Object,
        default: {
            name: '默认标题',
            url: 'http://127.0.0.1:2379',
            version: 'v2',
            username: 'root',
            password: '123456'
        }
    }
})

const infoTable = ref([
    {
        key: 'health',
        value: 'true',
    }
])

const currentTable = ref([
    {
        key: 'health',
        value: 'true',
    }
])

const membersTable = ref([
    {
        key: 'health',
        value: 'true',
    }
])

const storeTable = ref([
    {
        key: 'health',
        value: 'true',
    }
])

const search = () => {
    getCluster();
    getCurrentInstance();
    getClusterMembers();
    getStatStore();
}

const getCluster = () => {
    let url = props.connect.url;
    let version = props.connect.url;
    let auth = {username: props.connect.username, password: props.connect.password}
    infoTable.value = [];
    infoTable.value.push({key: 'cluster.api', value: props.connect.version});
    cluster_version(url, version, auth)
        .then(res => {
            let result = res.data;
            infoTable.value.push({key: 'cluster.version', value: result.etcdcluster});
            infoTable.value.push({key: 'server.version', value: result.etcdserver});
            infoTable.value.sort((a, b) => {
                return a.key.localeCompare(b.key);
            })
        })
        .catch(error => {
            ElMessage.error('VersionEtcd:' + error.message)
        });
    cluster_health(url, version, auth)
        .then(res => {
            let result = res.data;
            infoTable.value.push({key: 'cluster.healthy', value: result.health + ' ' + result.reason});
            infoTable.value.sort((a, b) => {
                return a.key.localeCompare(b.key);
            })
        })
        .catch(error => {
            ElMessage.error('HealthEtcd:' + error.message)
        });
    is_auth_enabled(url, version, auth)
        .then(res => {
            let result = res.data;
            infoTable.value.push({key: 'cluster.auth.enabled', value: result.enabled});
            infoTable.value.sort((a, b) => {
                return a.key.localeCompare(b.key);
            })
        })
        .catch(error => {
            ElMessage.error('AuthedEtcd:' + error.message)
        });
}

function handleSwitchChange(value) {
    if (value) {
        authEnable();
    } else {
        authDisable();
    }
}

function authEnable() {
    let url = props.connect.url;
    auth_enable(url)
        .then(res => {
            let result = res.data;
            ElMessage.success('auth_enable ' + 'success');
        })
        .catch(error => {
            let message = error.response.data.message;
            ElMessage.error('auth_enable ' + message);
        })
}

function authDisable() {
    let url = props.connect.url;
    auth_disable(url)
        .then(res => {
            let result = res.data;
            console.log(result);
            ElMessage.success('auth_disable ' + 'success');
        })
        .catch((error) => {
            let message = error.response.data.message;
            ElMessage.error('auth_disable ' + message);
        })
}

const getStatStore = () => {
    let url = props.connect.url;
    let version = props.connect.url;
    let auth = {username: props.connect.username, password: props.connect.password}
    storeTable.value = [];
    stats_store(url)
        .then(res => {
            let result = res.data;
            console.log(result);
        })
        .catch(error => {
            ElMessage.error('StoreEtcd:' + error.message)
        })
}

const getCurrentInstance = () => {
    let url = props.connect.url;
    let version = props.connect.url;
    let auth = {username: props.connect.username, password: props.connect.password}
    currentTable.value = [];
    stats_self(url)
        .then(res => {
            let result = res.data;
            currentTable.value.push({key: 'id', value: result.id});
            currentTable.value.push({key: 'name', value: result.name});
            currentTable.value.push({key: 'state', value: result.state});
            currentTable.value.push({key: 'uptime', value: result.startTime});
            currentTable.value.push({key: 'leader', value: result.leaderInfo.leader});
        })
        .catch(error => {
            ElMessage.error('MembersEtcd:' + error.message)
        })
}

const getClusterMembers = () => {
    let url = props.connect.url;
    let version = props.connect.url;
    let auth = {username: props.connect.username, password: props.connect.password}
    membersTable.value = [];
    cluster_members(url)
        .then(res => {
            let items = res.data.members;
            if (Array.isArray(items)) {
                for (let i = 0; i < items.length; i++) {
                    membersTable.value.push({
                        id: items[i].id,
                        name: items[i].name,
                        clientURLs: items[i].clientURLs,
                        peerURLs: items[i].peerURLs,
                    });
                }
            }
        })
        .catch(error => {
            ElMessage.error('MembersEtcd:' + error.message)
        })
}

// 页面加载完成后调用
onMounted(() => {
    search();
})
</script>
<style scoped>
.row-with-margin {
    margin-bottom: 20px; /* 设置行与行之间的间隔为 20 像素 */
}

.col-content {
    background-color: #f0f0f0;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
</style>